<script lang="ts" setup>
// #region 引入包, 函数和组件
import type { SearchResultItem } from "@/services/type"
import { useMusicStore } from "@/store";
import { ref } from "vue"
import { songDetailApi } from '@/services' // 获取歌曲详情
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
// 接受父组件的参数
const props = defineProps<{
  list: SearchResultItem[]
}>()
const music = useMusicStore()
// #endregion

// #region // 变量

// #endregion

// #region // 函数
const playSong = async (id: undefined | string | number) => {
  if (!id) return
  try {
    // 显示加载中
    music.changeLoading(true)
    // 调接口获取数据
    // const id = songsList.value[currentIndex.value].id
    const res = await songDetailApi(id)
    // const lyricRes = await lyricApi(id)
    // 接受数据
    // detail.value = res.playlist
    // playlist.value = res.playlist.tracks
    console.log(res)
    if (res.code === 200) {
      music.onClickPlaySong(res.songs[0])
    }

    // 隐藏加载中
    music.changeLoading(false)
  } catch (error) {
    console.log(error)
  }
}
// #endregion

// #region // 生命周期和vue函数

// #endregion
</script>

<template>
  <view class="result" v-if="list.length">
    <view class="result_item" v-for="item in list" :key="item.id" @click="playSong(item.id)">
      <view class="item_title">{{ item.name }}</view>
      <image mode="aspectFill" src="/static/index/bofang.png"></image>
      <view class="item_ar">{{ item.artists.map(v => v.name).join('/') }}</view>
    </view>
  </view>
  <view class="empty" v-else>无结果...</view>
</template>

<style lang="scss" scoped>
.result_item {
  display: grid;
  grid-template-columns: auto 80rpx;
  grid-template-rows: 60rpx 40rpx;
  align-items: center;
  padding: 10rpx 0rpx 10rpx 40rpx;
  border-bottom: 2rpx solid #ddd;
  image {
    width: 40rpx;
    height: 40rpx;
    grid-column: 2 / span 1;
    grid-row: 1 / span 2;
  }
  .item_ar {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
  }
  .item_title,
  .item_ar {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.empty {
  font-size: 40rpx;
  color: #999;
  text-align: center;
  line-height: 100rpx;
}
</style>
